<template>
  <div class="ranking-detail-container">
    <!-- 顶部导航栏 -->
    <div class="header-nav">
      <div class="nav-left" @click="goBack">
        <Icon name="back" />
      </div>
      <div class="nav-title">人物详情</div>
      <div class="nav-right" @click="showShareMenu">
        <Icon name="share" />
      </div>
    </div>

    <div class="container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-container">
        <p>{{ error }}</p>
        <button @click="fetchPersonDetail" class="retry-btn">重试</button>
      </div>

      <!-- 正常内容 -->
      <template v-else>
        <!-- 主要信息卡片 -->
        <div class="main-card">
          <div class="profile-section">
            <div class="avatar">
              <img :src="itemDetail.image" :alt="itemDetail.name">
            </div>
            <div class="profile-info">
              <div class="name-section">
                <h1>{{ itemDetail.name }}</h1>
                <div class="tags">
                  <span v-for="tag in itemDetail.tags" :key="tag" class="tag" :class="getTagClass(tag)">
                    {{ tag }}
                  </span>
                </div>
              </div>
              <div class="description-wrapper">
                <p class="description" :class="{ expanded: isDescriptionExpanded }" ref="descriptionRef">
                  {{ itemDetail.subtitle }}
                </p>
                <button v-if="showExpandButton" class="expand-btn" @click="toggleDescription">
                  {{ isDescriptionExpanded ? '收起' : '展开' }}
                  <span class="expand-icon">{{ isDescriptionExpanded ? '▲' : '▼' }}</span>
                </button>
              </div>
            </div>
            <div class="rank-badge">
              <!-- <span class="rank-label">排名</span> -->
              <span class="rank-number">{{ itemDetail.rank }}</span>
            </div>
          </div>

          <!-- 评分区域 -->
          <div class="rating-section">
            <div class="rating-container">
              <!-- 综合评分 - 左侧 -->
              <div class="overall-rating">
                <div class="rating-score">{{ itemDetail.rating }}</div>
                <div class="rating-info">
                  <span class="rating-subtitle">综合评分</span>
                  <span class="rating-count">{{ itemDetail.ratingCount }}人评分</span>
                </div>
              </div>

              <!-- 我的评分 - 右侧 -->
              <div class="my-rating">
                <div class="rating-label">我的评分</div>
                <div class="stars" @click="rateItem">
                  <span v-for="i in 5" :key="i" class="star" :class="{ active: i <= userRating }"
                    @click.stop="setRating(i)">★</span>
                </div>
                <button class="login-btn" v-if="!userStore.isLoggedIn">登录后评分</button>
                <span class="login-text" v-else>点击星星评分</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计数据 -->
        <div class="stats-card">
          <div class="stats-row">
            <div v-for="stat in itemDetail.mainStats" :key="stat.label" class="stat-item">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </div>

        <!-- 相关事例 -->
        <!-- <div class="related-card">
          <h3>相关事例</h3>
          <div class="related-content"> -->
        <!-- 这里可以添加相关事例内容 -->
        <!-- </div> -->
        <!-- </div> -->

        <!-- 标签区域 -->
        <!-- <div class="tags-card">
          <div class="tags-header">
            <h3>为TA贴标签</h3>
            <span class="login-tip" v-if="!userStore.isLoggedIn">登录后可投票</span>
          </div>
          <div class="tags-list">
            <div v-for="tagItem in displayedTags" :key="tagItem.name" class="tag-item"
              :class="{ clickable: userStore.isLoggedIn }" @click="userStore.isLoggedIn && voteForTag(tagItem)">
              <Icon name="user" />
              <span class="tag-name">{{ tagItem.name }}</span>
              <span class="tag-count">{{ tagItem.count }}</span>
            </div>
          </div>
          <div class="collapse-btn" @click="toggleTagsExpansion">
            <span v-if="!isTagsExpanded">展开 ▼</span>
            <span v-else>收起 ▲</span>
          </div>
        </div> -->

        <!-- 评论区域 -->
        <div class="comments-card">
          <div class="comments-header">
            <div class="comments-title">
              <h3>💬 全部评论</h3>
              <span class="comments-count">{{ comments.length }}</span>
            </div>
            <div class="sort-tabs">
              <button class="sort-tab" :class="{ active: sortType === 'hot' }" @click="sortType = 'hot'">
                <span class="tab-icon">🔥</span>
                <span class="tab-text">热度</span>
              </button>
              <button class="sort-tab" :class="{ active: sortType === 'time' }" @click="sortType = 'time'">
                <span class="tab-icon">⏰</span>
                <span class="tab-text">时间</span>
              </button>
            </div>
          </div>

          <!-- 发表评论 -->
          <div class="comment-input-section">
            <div class="comment-input-card" :class="{ expanded: showCommentActions }">
              <div class="comment-input-header" @click="!showCommentActions && (showCommentActions = true)">
                <div class="user-avatar-small">
                  <img src="/src/assets/touxiang.png" alt="用户头像">
                </div>
                <span class="input-placeholder" v-if="!showCommentActions">
                  说点什么吧...
                </span>
                <textarea v-else v-model="newComment" placeholder="分享你的观点，理性讨论..." class="comment-input" rows="3"
                  ref="commentTextarea"></textarea>
              </div>
              <div v-if="showCommentActions" class="comment-actions">
                <div class="comment-buttons">
                  <button class="cancel-btn" @click="cancelComment">取消</button>
                  <button class="submit-btn" @click="submitComment" :disabled="!newComment.trim()">
                    发表
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <div v-if="sortedComments.length === 0" class="empty-comments">
              <div class="empty-icon">💭</div>
              <p class="empty-text">还没有评论</p>
              <p class="empty-subtext">来发表第一条评论吧</p>
            </div>
            <div v-for="comment in sortedComments" :key="comment.id" class="comment-item">
              <div class="comment-avatar">
                <img :src="comment.avatar" :alt="comment.username">
              </div>
              <div class="comment-body">
                <div class="comment-header">
                  <div class="user-info">
                    <span class="comment-username">{{ comment.username }}</span>
                    <span class="user-badge" v-if="comment.isVip">VIP</span>
                  </div>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
                <div class="comment-footer">
                  <span class="comment-time">{{ formatTime(comment.time) }}</span>
                  <div class="comment-actions-bar">
                    <button class="action-btn like-btn" :class="{ liked: comment.isLiked }"
                      @click="toggleLike(comment)">
                      <span class="btn-icon">{{ comment.isLiked ? '❤️' : '🤍' }}</span>
                      <span class="btn-text">{{ comment.likes || '' }}</span>
                    </button>
                    <button class="action-btn reply-btn" @click="showReplyInput(comment.id)">
                      <span class="btn-icon">💬</span>
                      <span class="btn-text">回复</span>
                    </button>
                  </div>
                </div>

                <!-- 回复输入框 -->
                <div v-if="replyingTo === comment.id" class="reply-input-section">
                  <div class="reply-input-wrapper">
                    <textarea v-model="replyContent" :placeholder="`回复 @${comment.username}`" class="reply-input"
                      rows="2"></textarea>
                    <div class="reply-actions">
                      <button class="cancel-btn" @click="cancelReply">取消</button>
                      <button class="submit-btn" @click="submitReply(comment.id)"
                        :disabled="!replyContent.trim()">发送</button>
                    </div>
                  </div>
                </div>

                <!-- 回复列表 -->
                <div v-if="comment.replies && comment.replies.length > 0" class="replies-section">
                  <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                    <div class="reply-avatar">
                      <img :src="reply.avatar" :alt="reply.username">
                    </div>
                    <div class="reply-body">
                      <div class="reply-header">
                        <span class="reply-username">{{ reply.username }}</span>
                        <span v-if="reply.replyTo" class="reply-to">回复 @{{ reply.replyTo }}</span>
                      </div>
                      <div class="reply-text">{{ reply.content }}</div>
                      <div class="reply-footer">
                        <span class="reply-time">{{ formatTime(reply.time) }}</span>
                        <div class="reply-actions-bar">
                          <button class="like-btn" :class="{ liked: reply.isLiked }" @click="toggleReplyLike(reply)">
                            <span class="btn-icon">{{ reply.isLiked ? '❤️' : '🤍' }}</span>
                            <span class="btn-text">{{ reply.likes || '' }}</span>
                          </button>
                          <button class="reply-btn" @click="showReplyInput(comment.id, reply.username)">回复</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="comment.replies.length >= 3" class="show-more-replies"
                    @click="loadMoreReplies(comment.id)">
                    查看更多 {{ comment.totalReplies - comment.replies.length }} 条回复 →
                  </div>
                </div>
              </div>
            </div>

            <!-- 加载更多评论 -->
            <div v-if="hasMoreComments" class="load-more-comments" @click="loadMoreComments">
              <span>加载更多评论</span>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 分享弹窗 -->
    <div v-if="showShareDialog" class="share-overlay" @click="showShareDialog = false">
      <div class="share-dialog" @click.stop>
        <div class="share-header">
          <h3>分享</h3>
          <span class="close-btn" @click="showShareDialog = false">×</span>
        </div>
        <div class="share-options">
          <div class="share-option" @click="copyLink">
            <div class="share-icon link">🔗</div>
            <span>复制链接</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { getRankingPersonDetail, getRankingCommentTree, addRankingComment, createRankingScore, toggleRankingCommentLike } from '@/api/forum'
import Icon from '@/components/Icon.vue'


const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const category = computed(() => route.params.category)
const itemId = computed(() => route.params.id)

// 加载状态
const loading = ref(true)
const error = ref(null)

const itemDetail = ref({
  name: '',
  subtitle: '',
  image: '',
  rank: 0,
  rating: 0,
  ratingCount: 0,
  tags: [],
  mainStats: [],
  userTags: []
})

const userRating = ref(0)
const sortType = ref('hot')
const newComment = ref('')
const showCommentActions = ref(false)
const showEmojiPicker = ref(false)
const replyingTo = ref(null)
const replyContent = ref('')
const hasMoreComments = ref(true)
const showShareDialog = ref(false)
const isTagsExpanded = ref(false)
const isDescriptionExpanded = ref(false)
const showExpandButton = ref(false)
const descriptionRef = ref(null)

// 常用表情
const commonEmojis = ['😊', '😂', '👍', '❤️', '😍', '🤔', '😭', '🔥', '💯', '👏', '🙏', '😎']

// 评论数据
const comments = ref([
  {
    id: 1,
    username: '数字探索者',
    avatar: '/src/assets/touxiang.png',
    content: '这个人物确实很有争议性，不过从数据来看还是挺有影响力的。',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
    likes: 15,
    isLiked: false,
    replies: [
      {
        id: 101,
        username: '路人甲',
        avatar: '/src/assets/touxiang.png',
        content: '同意，影响力确实不小',
        time: new Date(Date.now() - 1 * 60 * 60 * 1000),
        likes: 3,
        isLiked: true,
        replyTo: '数字探索者'
      }
    ],
    totalReplies: 1
  },
  {
    id: 2,
    username: '网络观察员',
    avatar: '/src/assets/touxiang.png',
    content: '说实话，这种靠炒作上位的方式真的不太好，对整个行业都有负面影响。希望大家能理性看待。',
    time: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5小时前
    likes: 28,
    isLiked: true,
    replies: [
      {
        id: 201,
        username: '理性分析师',
        avatar: '/src/assets/touxiang.png',
        content: '确实需要理性看待，不过也要承认人家的营销能力',
        time: new Date(Date.now() - 4 * 60 * 60 * 1000),
        likes: 8,
        isLiked: false,
        replyTo: '网络观察员'
      },
      {
        id: 202,
        username: '吃瓜群众',
        avatar: '/src/assets/touxiang.png',
        content: '哈哈哈，反正我就是来看热闹的',
        time: new Date(Date.now() - 3 * 60 * 60 * 1000),
        likes: 12,
        isLiked: false,
        replyTo: '网络观察员'
      }
    ],
    totalReplies: 2
  },
  {
    id: 3,
    username: 'KOL研究者',
    avatar: '/src/assets/touxiang.png',
    content: '从商业角度来看，这种操作确实很成功，但是从道德层面就有待商榷了。',
    time: new Date(Date.now() - 8 * 60 * 60 * 1000), // 8小时前
    likes: 7,
    isLiked: false,
    replies: [],
    totalReplies: 0
  }
])

// 获取标签样式类
const getTagClass = (tag) => {
  const tagClasses = {
    'KOL': 'tag-kol',
    '美女': 'tag-beauty',
    '真神': 'tag-god',
    '畜生': 'tag-animal'
  }
  return tagClasses[tag] || 'tag-default'
}

// 计算属性：排序后的评论
const sortedComments = computed(() => {
  const commentsCopy = [...comments.value]
  if (sortType.value === 'hot') {
    return commentsCopy.sort((a, b) => (b.likes || 0) - (a.likes || 0))
  } else {
    return commentsCopy.sort((a, b) => new Date(b.time) - new Date(a.time))
  }
})

// 计算属性：显示的标签
const displayedTags = computed(() => {
  if (!itemDetail.value.userTags) return []

  if (isTagsExpanded.value) {
    return itemDetail.value.userTags
  } else {
    // 默认只显示前两个标签
    return itemDetail.value.userTags.slice(0, 2)
  }
})

// 为标签投票
const voteForTag = async (tagItem) => {
  if (!userStore.isLoggedIn) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 这里应该调用标签投票的API
    // 暂时模拟投票成功
    console.log('为标签投票:', tagItem.name)

    // 增加标签的投票数
    tagItem.count = (tagItem.count || 0) + 1

    // 显示投票成功提示
    alert(`已为"${tagItem.name}"标签投票成功！`)
  } catch (error) {
    console.error('标签投票失败:', error)
    alert('标签投票失败，请稍后重试')
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 格式化时间
const formatTime = (time) => {
  const now = new Date()
  const diff = now - new Date(time)
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  // 处理时间差为负数或刚刚发表的情况
  if (minutes < 1) {
    return '刚刚'
  } else if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${days}天前`
  }
}

// 评论相关方法
const submitComment = async () => {
  if (!newComment.value.trim()) return

  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用API发表评论
    const commentData = {
      content: newComment.value.trim(),
      likeCount: 0,
      parentId: 0, // 一级评论，parentId为0
      personId: itemId.value,
      replyCount: 0,
      status: 0,
      userId: userStore.uid
    }

    const res = await addRankingComment(commentData)
    console.log('发表评论成功:', res)

    if (res.code === 200) {
      // 发表成功后，重新获取评论列表
      await fetchCommentTree()
      newComment.value = ''
      showCommentActions.value = false
    } else {
      alert('评论发表失败：' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('发表评论失败:', error)
    alert('评论发表失败，请稍后重试')
  }
}

const cancelComment = () => {
  newComment.value = ''
  showCommentActions.value = false
}

const showReplyInput = (commentId, replyToUser = null) => {
  replyingTo.value = commentId
  replyContent.value = replyToUser ? `@${replyToUser} ` : ''
}

const cancelReply = () => {
  replyingTo.value = null
  replyContent.value = ''
}

const submitReply = async (commentId) => {
  if (!replyContent.value.trim()) return

  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用API发表回复
    const replyData = {
      content: replyContent.value.trim(),
      likeCount: 0,
      parentId: commentId, // 回复评论时，parentId为当前评论的id
      personId: itemId.value,
      replyCount: 0,
      status: 0,
      userId: userStore.uid
    }

    const res = await addRankingComment(replyData)
    console.log('发表回复成功:', res)

    if (res.code === 200) {
      // 发表成功后，重新获取评论列表
      await fetchCommentTree()
      replyContent.value = ''
      replyingTo.value = null
    } else {
      alert('回复发表失败：' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('发表回复失败:', error)
    alert('回复发表失败，请稍后重试')
  }
}

const toggleLike = async (comment) => {
  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用评论点赞接口
    const res = await toggleRankingCommentLike(comment.id, userStore.uid)

    console.log('排行榜评论点赞接口返回:', res)

    // 根据接口返回的数据更新状态
    if (res.code === 200 && res.data) {
      // 更新点赞状态
      comment.isLiked = res.data.liked

      // 更新点赞数
      comment.likes = res.data.count

      console.log(`评论 ${comment.id} 点赞状态已更新: liked=${res.data.liked}, count=${res.data.count}`)
    }
  } catch (error) {
    console.error('评论点赞操作失败:', error)
    alert('评论点赞操作失败，请稍后重试')
  }
}

const toggleReplyLike = async (reply) => {
  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用评论点赞接口（回复也是评论）
    const res = await toggleRankingCommentLike(reply.id, userStore.uid)

    console.log('排行榜回复点赞接口返回:', res)

    // 根据接口返回的数据更新状态
    if (res.code === 200 && res.data) {
      // 更新点赞状态
      reply.isLiked = res.data.liked

      // 更新点赞数
      reply.likes = res.data.count

      console.log(`回复 ${reply.id} 点赞状态已更新: liked=${res.data.liked}, count=${res.data.count}`)
    }
  } catch (error) {
    console.error('回复点赞操作失败:', error)
    alert('回复点赞操作失败，请稍后重试')
  }
}

const loadMoreReplies = (commentId) => {
  // 模拟加载更多回复
  console.log('加载更多回复:', commentId)
}

const loadMoreComments = () => {
  // 模拟加载更多评论
  hasMoreComments.value = false
}

// 添加表情到评论
const addEmoji = (emoji) => {
  newComment.value += emoji
  showEmojiPicker.value = false
}

// 显示分享菜单
const showShareMenu = () => {
  showShareDialog.value = true
}

// 分享功能
const copyLink = async () => {
  try {
    // 构建分享文本
    const shareText = `【排行榜推荐】${itemDetail.value.name}\n评分：${itemDetail.value.rating.toFixed(1)}⭐ | 排名：#${itemDetail.value.rank}\n${itemDetail.value.subtitle || ''}\n查看详情：${window.location.href}`

    await navigator.clipboard.writeText(shareText)
    alert('分享内容已复制到剪贴板！')
    showShareDialog.value = false
  } catch (err) {
    console.error('复制失败:', err)
    // 降级方案：使用传统方法复制
    const textArea = document.createElement('textarea')
    const shareText = `【排行榜推荐】${itemDetail.value.name}\n评分：${itemDetail.value.rating.toFixed(1)}⭐ | 排名：#${itemDetail.value.rank}\n${itemDetail.value.subtitle || ''}\n查看详情：${window.location.href}`
    textArea.value = shareText
    textArea.style.position = 'fixed'
    textArea.style.opacity = '0'
    document.body.appendChild(textArea)
    textArea.select()
    try {
      document.execCommand('copy')
      alert('分享内容已复制到剪贴板！')
      showShareDialog.value = false
    } catch (e) {
      alert('复制失败，请手动复制链接')
    }
    document.body.removeChild(textArea)
  }
}



// 切换标签展开/收起
const toggleTagsExpansion = () => {
  isTagsExpanded.value = !isTagsExpanded.value
}

// 切换描述展开/收起
const toggleDescription = () => {
  isDescriptionExpanded.value = !isDescriptionExpanded.value
}

// 检查描述文本是否需要展开按钮
const checkDescriptionHeight = () => {
  if (descriptionRef.value) {
    const element = descriptionRef.value
    // 检查文本是否超过3行（约60px）
    showExpandButton.value = element.scrollHeight > 60
  }
}

// 评分功能
const setRating = async (rating) => {
  if (!userStore.isLoggedIn) {
    console.log('请先登录')
    // 跳转到登录页面
    router.push('/user/login')
    return
  }

  if (!userStore.uid) {
    console.error('用户ID不存在')
    alert('用户信息不完整，请重新登录')
    router.push('/user/login')
    return
  }

  try {
    console.log('准备提交评分:', { personId: itemId.value, score: rating, userId: userStore.uid })

    // 调用API提交评分
    const scoreData = {
      personId: itemId.value,
      score: rating,
      userId: userStore.uid
    }

    const response = await createRankingScore(scoreData)
    console.log('评分提交成功:', response)

    if (response && response.code === 200) {
      userRating.value = rating
      // 重新获取详情数据，更新评分
      await fetchPersonDetail()
      // 显示接口返回的消息，如果没有消息则显示默认成功消息
      alert(response.msg || response.message || '评分成功！')
    } else {
      // 显示接口返回的具体错误消息
      alert(response.msg || response.message || '评分提交失败')
    }
  } catch (error) {
    console.error('评分提交失败:', error)
    alert('评分提交失败：' + (error.message || '请稍后重试'))
  }
}

const rateItem = () => {
  if (!userStore.isLoggedIn) {
    console.log('请先登录')
    return
  }
}

// 获取人物详情
const fetchPersonDetail = async () => {
  try {
    loading.value = true
    error.value = null

    const response = await getRankingPersonDetail(itemId.value)

    if (response && response.code === 200 && response.data) {
      // 将rankTagList转换为userTags格式
      const userTags = response.data.rankTagList ? response.data.rankTagList.map(tag => ({
        name: tag.tagName || tag.description || '',
        count: tag.voteCount || Math.floor(Math.random() * 100) // 如果没有投票数，使用随机数
      })) : []

      // 更新人物详情数据
      itemDetail.value = {
        name: response.data.rankName || '',
        subtitle: response.data.intro || response.data.remark || '',
        image: response.data.avatar || '/src/assets/touxiang.png',
        rank: response.data.rank || 0,
        rating: response.data.avgScore || response.data.score || response.data.rating || 0,
        ratingCount: response.data.ratingCount || 0,
        tags: response.data.tags || [],
        mainStats: [
          { label: '热度', value: response.data.viewCount || 0 },
          { label: '评分', value: response.data.avgScore || response.data.score || response.data.rating || 0 },
          { label: '排名', value: response.data.rank || 0 }
        ],
        userTags: userTags
      }

      // 如果用户已登录，获取用户当前评分
      if (userStore.isLoggedIn && response.data.userScore) {
        userRating.value = response.data.userScore
      }
    } else {
      error.value = '获取人物详情失败'
    }
  } catch (err) {
    console.error('获取人物详情失败:', err)
    error.value = '获取人物详情失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 获取详情数据
const fetchItemDetail = async () => {
  // 优先使用真实API
  try {
    await fetchPersonDetail()
    // 如果API成功获取数据，直接返回
    if (itemDetail.value.name) {
      return
    }
  } catch (err) {
    console.error('API获取失败，使用模拟数据:', err)
  }

  // API失败或没有数据时，使用模拟数据作为备用
  const mockData = {
    hot: {
      1: {
        name: '发财妹',
        subtitle: '百姓家双网传与多个数据头部KoL有染成功混入Kol圈子借网上位...',
        image: '/src/assets/touxiang.png',
        rank: 1,
        rating: 2.7,
        ratingCount: 46,
        tags: ['KOL', '美女'],
        mainStats: [
          { label: '事例', value: '0' },
          { label: '评论', value: '20' },
          { label: '浏览', value: '3891' },
          { label: '浏览用户', value: '730' }
        ],
        userTags: [
          { name: '畜生', count: 50 },
          { name: '真神', count: 1 },
          { name: 'KOL', count: 2 },
          { name: '美女', count: 14 }
        ]
      }
    },
    beauty: {
      1: {
        name: '雅典娜',
        subtitle: '智慧女神，古希腊神话中的重要神祇，掌管智慧、战争、手工艺和实用艺术...',
        image: '/src/assets/touxiang.png',
        rank: 1,
        rating: 4.8,
        ratingCount: 128,
        tags: ['真神', '美女'],
        mainStats: [
          { label: '事例', value: '15' },
          { label: '评论', value: '89' },
          { label: '浏览', value: '12580' },
          { label: '浏览用户', value: '2341' }
        ],
        userTags: [
          { name: '真神', count: 95 },
          { name: '美女', count: 87 },
          { name: 'KOL', count: 12 },
          { name: '畜生', count: 3 }
        ]
      }
    },
    animal: {
      1: {
        name: '神龙',
        subtitle: '中华文化中最为神圣的生物，象征着权力、智慧和好运，拥有呼风唤雨的神力...',
        image: '/src/assets/touxiang.png',
        rank: 1,
        rating: 4.9,
        ratingCount: 256,
        tags: ['真神', '畜生'],
        mainStats: [
          { label: '事例', value: '28' },
          { label: '评论', value: '156' },
          { label: '浏览', value: '25680' },
          { label: '浏览用户', value: '4521' }
        ],
        userTags: [
          { name: '真神', count: 180 },
          { name: '畜生', count: 45 },
          { name: 'KOL', count: 8 },
          { name: '美女', count: 2 }
        ]
      }
    }
  }

  const data = mockData[category.value]?.[itemId.value]
  if (data) {
    itemDetail.value = data
  } else {
    // 默认数据
    itemDetail.value = {
      name: '未知人物',
      subtitle: '详情加载中...',
      image: '/src/assets/touxiang.png',
      rank: 0,
      rating: 0,
      ratingCount: 0,
      tags: [],
      mainStats: [],
      userTags: []
    }
  }
}

// 获取评论树
const fetchCommentTree = async () => {
  try {
    console.log('正在获取评论树，人物ID:', itemId.value)
    const res = await getRankingCommentTree(itemId.value)
    console.log('获取评论树成功:', res)

    if (res.code === 200 && res.data) {
      // 将API返回的评论数据转换为前端所需格式
      const commentData = res.data
      comments.value = commentData.map(comment => ({
        id: comment.id,
        username: comment.users?.nickName || `用户${comment.userId}`,
        avatar: comment.users?.avatar || '/src/assets/touxiang.png',
        content: comment.content,
        time: comment.createTime,
        likes: comment.likeCount,
        isLiked: comment.liked || false,
        replies: comment.children ? comment.children.map(reply => ({
          id: reply.id,
          username: reply.users?.nickName || `用户${reply.userId}`,
          avatar: reply.users?.avatar || '/src/assets/touxiang.png',
          content: reply.content,
          time: reply.createTime,
          likes: reply.likeCount || 0,
          isLiked: reply.liked || false,
          replyTo: comment.users?.nickName || `用户${comment.userId}`
        })) : [],
        totalReplies: comment.children ? comment.children.length : 0
      }))
    }
  } catch (error) {
    console.error('获取评论树失败:', error)
  }
}

onMounted(() => {
  fetchItemDetail()
  fetchCommentTree()
  // 延迟检查，确保DOM已渲染
  setTimeout(() => {
    checkDescriptionHeight()
  }, 100)
})
</script>
<style sco ped>
.ranking-detail-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  padding-bottom: 70px;
}

/* 顶部导航栏 */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-left,
.nav-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.container {
  padding: 12px 16px;
}

/* 主要信息卡片 */
.main-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-section {
  display: flex;
  padding: 16px;
  gap: 12px;
  position: relative;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
}

.name-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.name-section h1 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.tags {
  display: flex;
  gap: 4px;
}

.tag {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.tag-kol {
  background: #4285f4;
}

.tag-beauty {
  background: #ff69b4;
}

.tag-god {
  background: #ffa500;
}

.tag-animal {
  background: #32cd32;
}

.tag-default {
  background: #999;
}

/* 描述区域 */
.description-wrapper {
  margin-bottom: 12px;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 63px;
  transition: all 0.3s ease;
}

.description.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
}

.expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4285f4;
  font-size: 13px;
  background: none;
  border: none;
  padding: 4px 0;
  margin-top: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.expand-btn:active {
  transform: scale(0.95);
}

.expand-icon {
  font-size: 10px;
  transition: transform 0.3s ease;
}

/* 排名徽章 */
.rank-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.rank-label {
  font-size: 11px;
  opacity: 0.9;
}

.rank-number {
  font-size: 14px;
  font-weight: 700;
}

/* 评分区域 - 优化版 */
.rating-section {
  padding: 20px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 0 12px 12px;
}

.rating-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 综合评分 - 左侧 */
.overall-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rating-score {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.rating-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rating-subtitle {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
}

.rating-count {
  font-size: 11px;
  color: #9ca3af;
}

/* 我的评分 - 右侧 */
.my-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.rating-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.stars {
  display: flex;
  gap: 6px;
  cursor: pointer;
}

.star {
  font-size: 24px;
  color: #e2e8f0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.star:active {
  transform: scale(0.9);
}

.star.active {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.login-btn {
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
  margin-top: 4px;
}

.login-btn:active {
  transform: scale(0.95);
}

.login-text {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}

/* 统计数据卡片 */
.stats-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

/* 相关事例卡片 */
.related-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.related-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

/* 标签卡片 */
.tags-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tags-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.login-tip {
  font-size: 12px;
  color: #999;
}

.tags-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 6px;
}

.tag-item.clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item.clickable:hover {
  background: #e9ecef;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tag-item.clickable:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.tag-name {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.tag-count {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.collapse-btn {
  text-align: center;
  color: #4285f4;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.collapse-btn:hover {
  background: rgba(66, 133, 244, 0.1);
  transform: translateY(-1px);
}

/* 评论卡片 - 移动端优先设计 */
.comments-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.comments-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comments-title h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.comments-count {
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.sort-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 10px;
}

.sort-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  font-weight: 500;
}

.sort-tab .tab-icon {
  font-size: 14px;
}

.sort-tab .tab-text {
  font-size: 12px;
}

.sort-tab.active {
  background: white;
  color: #4285f4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sort-tab:active {
  transform: scale(0.95);
}

/* 评论输入区域 - 移动端优化 */
.comment-input-section {
  margin-bottom: 20px;
}

.comment-input-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  overflow: hidden;
}

.comment-input-card.expanded {
  border-color: #4285f4;
  box-shadow: 0 4px 16px rgba(66, 133, 244, 0.12);
}

.comment-input-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
}

.user-avatar-small {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #f1f5f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.user-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.input-placeholder {
  flex: 1;
  color: #94a3b8;
  font-size: 14px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.input-placeholder:active {
  background: #f1f5f9;
}

.comment-input {
  width: 100%;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  min-height: 80px;
  transition: all 0.3s ease;
  background: #ffffff;
  font-family: inherit;
}

.comment-input:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.comment-input:focus {
  outline: none;
}

.comment-input::placeholder {
  color: #cbd5e1;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px;
  padding-top: 8px;
  gap: 12px;
}





.comment-buttons {
  display: flex;
  gap: 12px;
}

.comment-buttons {
  display: flex;
  gap: 8px;
}

.cancel-btn,
.submit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cancel-btn {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.cancel-btn:active {
  transform: scale(0.95);
  background: #f1f5f9;
}

.submit-btn {
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.submit-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.submit-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

/* 评论列表 - 移动端优化 */
.comments-list {
  margin-top: 16px;
}

.empty-comments {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-text {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  margin: 0 0 4px 0;
}

.empty-subtext {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.comment-username {
  font-weight: 600;
  color: #1e293b;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-badge {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
  flex-shrink: 0;
}

.comment-text {
  color: #374151;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.comment-time {
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
}

.comment-actions-bar {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  font-weight: 500;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn.liked {
  color: #ef4444;
}

.action-btn .btn-icon {
  font-size: 16px;
}

.action-btn .btn-text {
  font-size: 12px;
}



/* 回复输入区域 - 移动端优化 */
.reply-input-section {
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.reply-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  resize: none;
  min-height: 60px;
  background: white;
  line-height: 1.5;
}

.reply-input:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 回复列表 - 移动端优化 */
.replies-section {
  margin-top: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.reply-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

.reply-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.reply-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reply-body {
  flex: 1;
  min-width: 0;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.reply-username {
  font-weight: 600;
  color: #1e293b;
  font-size: 13px;
}

.reply-to {
  color: #4285f4;
  font-size: 12px;
}

.reply-text {
  color: #374151;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  word-wrap: break-word;
}

.reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.reply-time {
  color: #94a3b8;
  font-size: 11px;
  flex-shrink: 0;
}

.reply-actions-bar {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.reply-actions-bar .like-btn,
.reply-actions-bar .reply-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
}

.reply-actions-bar .like-btn:active,
.reply-actions-bar .reply-btn:active {
  transform: scale(0.95);
}

.reply-actions-bar .like-btn.liked {
  color: #ef4444;
}

.reply-actions-bar .like-btn .btn-icon {
  font-size: 14px;
}

.show-more-replies {
  color: #4285f4;
  font-size: 12px;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 8px;
  text-align: center;
  font-weight: 500;
  transition: all 0.2s ease;
}

.show-more-replies:active {
  transform: scale(0.98);
}

/* 加载更多评论 - 移动端优化 */
.load-more-comments {
  text-align: center;
  padding: 14px;
  margin-top: 16px;
  cursor: pointer;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  color: #4285f4;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
}

.load-more-comments:active {
  transform: scale(0.98);
  background: #f1f5f9;
}

/* 分享弹窗 */
.share-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.share-dialog {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 320px;
  animation: slideUp 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.share-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.close-btn {
  font-size: 24px;
  color: #999;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: #f0f0f0;
  color: #666;
}

.share-options {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  flex: 1;
}

.share-option:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
}

.share-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
  color: white;
}

.share-icon.poster {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.share-icon.link {
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
}

.share-option span {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 海报预览弹窗 */
.poster-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.3s ease;
}

.poster-dialog {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.poster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.poster-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.poster-content {
  text-align: center;
}

.poster-loading {
  padding: 40px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #4285f4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.poster-loading p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.poster-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.poster-canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.poster-actions {
  display: flex;
  justify-content: center;
}

.save-poster-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #4285f4 0%, #0ea5e9 100%);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
}

.save-poster-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
}

.save-poster-btn span {
  font-size: 18px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .container {
    padding: 8px;
  }

  .profile-section {
    padding: 12px;
  }

  .rating-section {
    padding: 16px 12px;
  }

  .rating-container {
    gap: 20px;
  }

  .rating-score {
    font-size: 42px;
  }

  .stars {
    gap: 4px;
  }

  .star {
    font-size: 22px;
  }

  .stats-card,
  .related-card,
  .tags-card,
  .comments-card {
    padding: 14px;
    margin-bottom: 10px;
  }

  /* 评论区移动端优化 */
  .comments-card {
    border-radius: 12px;
  }

  .comments-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .comments-title h3 {
    font-size: 16px;
  }

  .sort-tabs {
    flex-shrink: 0;
  }

  .sort-tab .tab-text {
    display: inline;
  }

  /* 评论输入优化 */
  .comment-input-card {
    border-radius: 10px;
  }

  .comment-input {
    font-size: 14px;
    min-height: 70px;
  }

  /* 评论列表优化 */
  .comment-item {
    padding: 14px 0;
  }

  .comment-avatar {
    width: 38px;
    height: 38px;
  }

  .comment-username {
    font-size: 13px;
  }

  .comment-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .comment-actions-bar {
    gap: 12px;
  }

  .action-btn {
    padding: 4px 6px;
    gap: 3px;
  }

  .action-btn .btn-icon {
    font-size: 15px;
  }

  .action-btn .btn-text {
    font-size: 11px;
  }

  /* 回复区域优化 */
  .replies-section {
    padding: 10px;
    border-radius: 6px;
  }

  .reply-item {
    padding: 8px 0;
  }

  .reply-avatar {
    width: 30px;
    height: 30px;
  }

  .reply-username {
    font-size: 12px;
  }

  .reply-text {
    font-size: 13px;
  }



  .sort-tab {
    flex: 1;
    text-align: center;
  }

  /* 评论项移动端优化 */
  .comment-main {
    gap: 12px;
  }

  .comment-avatar {
    width: 36px;
    height: 36px;
  }

  .comment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .comment-meta {
    order: 2;
  }

  .user-info {
    order: 1;
  }

  /* 评论操作栏移动端优化 */
  .comment-actions-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .comment-stats {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .action-btn {
    padding: 6px 10px;
    font-size: 12px;
    min-width: 60px;
    justify-content: center;
  }

  .btn-text {
    font-size: 11px;
  }

  /* 回复区域移动端优化 */
  .reply-item {
    gap: 8px;
  }

  .reply-avatar {
    width: 28px;
    height: 28px;
  }

  .reply-header {
    flex-wrap: wrap;
    gap: 4px;
  }

  .reply-actions-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* 评论输入区域移动端优化 */
  .comment-input-header {
    padding: 12px 16px;
  }

  .comment-input-expanded {
    padding: 0 16px 16px;
  }

  .comment-buttons {
    justify-content: flex-end;
  }





  /* 统计数据移动端优化 */
  .stats-row {
    gap: 8px;
  }

  .stat-item {
    min-width: 0;
  }

  .stat-value {
    font-size: 16px;
  }

  .stat-label {
    font-size: 11px;
  }

  /* 标签区域移动端优化 */
  .tags-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tag-item {
    padding: 10px 12px;
  }

  /* 分享弹窗移动端优化 */
  .share-dialog {
    width: 95%;
    max-width: 300px;
    margin: 0 10px;
  }

  .share-options {
    gap: 12px;
  }

  .share-icon {
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  /* 海报弹窗移动端优化 */
  .poster-dialog {
    width: 95%;
    max-width: 400px;
    margin: 0 10px;
    max-height: 85vh;
  }
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 300px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #1890ff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 错误状态样式 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 300px;
  text-align: center;
}

.error-container p {
  color: #ff4d4f;
  margin-bottom: 16px;
  font-size: 16px;
}

.retry-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.retry-btn:hover {
  background-color: #40a9ff;
}

/* 超小屏幕适配 (手机竖屏) */
@media (max-width: 480px) {
  .container {
    padding: 6px;
  }

  .header-nav {
    padding: 10px 12px;
  }

  .nav-title {
    font-size: 16px;
  }

  .main-card,
  .stats-card,
  .related-card,
  .tags-card,
  .comments-card {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .profile-section {
    padding: 10px;
    gap: 10px;
  }

  .avatar {
    width: 50px;
    height: 50px;
  }

  .name-section h1 {
    font-size: 16px;
  }

  .description {
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    max-height: 58px;
  }

  .expand-btn {
    font-size: 12px;
  }

  .rank-badge {
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    font-size: 11px;
  }

  .rank-label {
    font-size: 10px;
  }

  .rank-number {
    font-size: 13px;
  }

  .rating-section {
    padding: 14px 10px;
  }

  .rating-container {
    gap: 16px;
  }

  .rating-score {
    font-size: 38px;
  }

  .rating-subtitle {
    font-size: 12px;
  }

  .rating-count {
    font-size: 10px;
  }

  .rating-label {
    font-size: 12px;
  }

  .stars {
    gap: 3px;
  }

  .star {
    font-size: 20px;
  }

  .login-btn {
    padding: 5px 14px;
    font-size: 11px;
  }

  .login-text {
    font-size: 10px;
  }

  /* 评论区超小屏优化 */
  .comments-card {
    padding: 12px;
  }

  .comments-title h3 {
    font-size: 15px;
  }

  .comments-count {
    font-size: 11px;
    padding: 2px 6px;
  }

  .sort-tab {
    padding: 5px 8px;
    font-size: 12px;
  }

  .sort-tab .tab-icon {
    font-size: 13px;
  }

  .sort-tab .tab-text {
    font-size: 11px;
  }

  /* 评论输入超小屏优化 */
  .comment-input-header {
    padding: 10px;
    gap: 8px;
  }

  .user-avatar-small {
    width: 32px;
    height: 32px;
  }

  .input-placeholder {
    font-size: 13px;
    padding: 6px 10px;
  }

  .comment-input {
    font-size: 13px;
    min-height: 70px;
  }

  .comment-actions {
    padding: 10px;
  }

  .tool-btn {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .cancel-btn,
  .submit-btn {
    padding: 7px 14px;
    font-size: 12px;
  }

  /* 评论列表超小屏优化 */
  .comment-item {
    padding: 12px 0;
    gap: 10px;
  }

  .comment-avatar {
    width: 36px;
    height: 36px;
  }

  .comment-username {
    font-size: 13px;
  }

  .comment-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .comment-time {
    font-size: 11px;
  }

  .comment-actions-bar {
    gap: 10px;
  }

  .action-btn {
    padding: 3px 6px;
    gap: 2px;
  }

  .action-btn .btn-icon {
    font-size: 14px;
  }

  .action-btn .btn-text {
    font-size: 11px;
  }

  /* 回复区域超小屏优化 */
  .replies-section {
    padding: 8px;
    margin-top: 10px;
  }

  .reply-item {
    padding: 8px 0;
    gap: 8px;
  }

  .reply-avatar {
    width: 28px;
    height: 28px;
  }

  .reply-username {
    font-size: 12px;
  }

  .reply-text {
    font-size: 12px;
  }

  .reply-time {
    font-size: 10px;
  }

  .reply-input-section {
    padding: 10px;
  }

  .reply-input {
    padding: 8px 10px;
    font-size: 12px;
    min-height: 50px;
  }



  /* 加载更多按钮 */
  .load-more-comments {
    padding: 12px;
    font-size: 12px;
  }

  /* 空状态 */
  .empty-comments {
    padding: 40px 16px;
  }

  .empty-icon {
    font-size: 40px;
  }

  .empty-text {
    font-size: 14px;
  }

  .empty-subtext {
    font-size: 12px;
  }
}
</style>
/* 分享弹窗样式
*/
.share-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 9999;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.share-dialog {
background: white;
border-radius: 24px 24px 0 0;
width: 100%;
max-width: 500px;
padding: 24px;
animation: slideUp 0.3s ease;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}

.share-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}

.share-header h3 {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin: 0;
}

.close-btn {
font-size: 32px;
color: #94a3b8;
cursor: pointer;
line-height: 1;
transition: all 0.3s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.close-btn:hover {
background: #f1f5f9;
color: #64748b;
transform: rotate(90deg);
}

.share-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.share-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}

.share-option:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-color: #667eea;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
}

.share-option:active {
transform: translateY(-2px);
}

.share-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 12px;
transition: all 0.3s ease;
}

.share-icon.poster {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.share-icon.link {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.share-option:hover .share-icon {
transform: scale(1.1) rotate(5deg);
}

.share-option span {
font-size: 15px;
font-weight: 600;
color: #1e293b;
}

/* 海报预览弹窗样式 */
.poster-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
animation: fadeIn 0.3s ease;
}

.poster-dialog {
background: white;
border-radius: 24px;
width: 100%;
max-width: 800px;
max-height: 90vh;
overflow: hidden;
animation: scaleIn 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes scaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}

.poster-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
}

.poster-header h3 {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin: 0;
}

.poster-content {
padding: 24px;
max-height: calc(90vh - 80px);
overflow-y: auto;
}

.poster-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
}

.poster-loading .loading-spinner {
width: 60px;
height: 60px;
border: 6px solid rgba(102, 126, 234, 0.2);
border-top: 6px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}

.poster-loading p {
color: #64748b;
font-size: 16px;
}

.poster-preview {
display: flex;
flex-direction: column;
align-items: center;
}

.poster-canvas {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
margin-bottom: 24px;
}

.poster-actions {
display: flex;
gap: 12px;
width: 100%;
max-width: 400px;
}

.save-poster-btn {
flex: 1;
padding: 14px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.save-poster-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.save-poster-btn:active {
transform: translateY(0);
}

.save-poster-btn span {
font-size: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
.share-dialog {
padding: 20px;
border-radius: 20px 20px 0 0;
}

.share-header h3 {
font-size: 18px;
}

.share-options {
gap: 12px;
}

.share-option {
padding: 20px 12px;
}

.share-icon {
width: 48px;
height: 48px;
font-size: 24px;
margin-bottom: 10px;
}

.share-option span {
font-size: 14px;
}

.poster-dialog {
max-width: 95%;
border-radius: 20px;
}

.poster-header {
padding: 16px 20px;
}

.poster-header h3 {
font-size: 18px;
}

.poster-content {
padding: 16px;
}

.poster-canvas {
border-radius: 8px;
}

.save-poster-btn {
padding: 12px 20px;
font-size: 15px;
}
}

@media (max-width: 480px) {
.poster-overlay {
padding: 10px;
}

.poster-dialog {
max-width: 100%;
max-height: 95vh;
border-radius: 16px;
}

.poster-content {
padding: 12px;
}

.save-poster-btn {
padding: 10px 16px;
font-size: 14px;
}
}
